<script>
import { dateFormat } from '@/common/utils/common'

export default {
  functional: true,
  components: {},
  props: {
    approval: Object,
    signName: Array,
    signDate: String,
    direction: {
      type: String,
      default: 'row',
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
  render(h, ctx) {
    const { approval, signName, signDate, direction } = ctx.props
    const nameRender = signName.map(it =>
      h(
        'div',
        {
          style: {
            flex: 1,
            display: 'inline-block',
            minWidth: '40px',
            textAlign: 'left',
          },
        },
        `${it.label}：${approval[it.key] || ''}`
      )
    )

    const date = dateFormat(approval[signDate], 'yyyy年MM月dd日')
    const dateRender = h(
      'div',
      {
        style: {
          display: 'flex',
          flex: 1,
        },
      },
      date
        ? [h('span', null, date)]
        : [
            h('div', { style: { minWidth: '10px', textAlign: 'left' } }, '年'),
            h('div', { style: { minWidth: '10px', textAlign: 'left' } }, '月'),
            h('div', null, '日'),
          ]
    )

    return h(
      'div',
      {
        style: {
          display: 'flex',
          flexDirection: direction || 'row',
          justifyContent: 'space-between',
        },
      },
      [...nameRender, dateRender]
    )
  },
}
</script>

<style lang="scss" scoped></style>
